<template>
    <div>
         <div class="duty_head">
            <div class="duty_add">
                     <el-button type="primary" @click="event.Add">新增</el-button>
            </div>
              <div class="search">
                <el-input style="width: 350px" size="large" v-model="data.key" placeholder="请输入关键字查询"
                    :suffix-icon="Search" />
            </div>
        </div>

        <div class="duty_main">
            <el-skeleton animated :rows="8" :loading="data.isFirst">
                <el-table :data="data.data" v-loading="data.loading"  style="width:100%">
                    <el-table-column label="序号" width="70" type="index"></el-table-column>
                    <el-table-column :show-overflow-tooltip="true" label="客户名称" width="100" prop="cname">

                    </el-table-column>
                  
                    <el-table-column :show-overflow-tooltip="true" label="预约项目" width="130" prop="pname">
                        <template #default="scope">
                            <el-tag type="primary">
                               {{scope.row.pname}}
                            </el-tag>
                        </template>
                    </el-table-column>

                   
                    <el-table-column :show-overflow-tooltip="true" label="预约时间" width="200" prop="createtime">
                        <template #default="scope">
                            <el-tag type="primary">
                                <el-icon>
                                    <timer />
                                </el-icon>
                                {{ scope.row.createtime }}
                            </el-tag>
                        </template>
                    </el-table-column>
                      <el-table-column :show-overflow-tooltip="true" label="结束时间" width="200" prop="endtime">
                        <template #default="scope">
                            <el-tag type="primary">
                                <el-icon>
                                    <timer />
                                </el-icon>
                                {{ scope.row.endtime }}
                            </el-tag>
                        </template>
                    </el-table-column>
                        <el-table-column :show-overflow-tooltip="true" label="预约技师" width="150" prop="value">
                        <template #default="scope">
                            <el-tag type="success">
                                {{ scope.row.uid }}
                            </el-tag>
                        </template>
                            </el-table-column>
                        <el-table-column :show-overflow-tooltip="true" label="总价" width="130" prop="value">
                        <template #default="scope">
                            <el-tag type="danger">
                                {{ scope.row.price }}
                            </el-tag>
                        </template>
                            </el-table-column>

                             <el-table-column :show-overflow-tooltip="true" label="预约状态" width="150" prop="value">
                        <template #default="scope">
                            <el-tag v-if="scope.row.state==1">
                                未使用
                            </el-tag>
                             <el-tag v-if="scope.row.state==2" type="success">
                                已使用
                            </el-tag>
                             <el-tag v-if="scope.row.state==3" type="danger">
                                已取消
                            </el-tag>
                        </template>
                            </el-table-column>
                  
                  

                    <el-table-column label="操作" prop="name" width="150">
                        <template #default="scope">
                          
                              <el-tooltip class="box-item" v-if="scope.row.state==1" effect="light" content="使用" placement="left-start">
                              <el-button type="success" :icon="Check" circle @click="event.statesy(scope.row.id)" />
                            </el-tooltip>
                             <el-tooltip class="box-item" v-if="scope.row.state==1" effect="light" content="取消" placement="left-start">
                              <el-button type="info" :icon="Delete" circle @click="event.stateqx(scope.row.id)" />
                            </el-tooltip>
                                <el-tooltip class="box-item" v-if="scope.row.state==3" effect="light" content="删除" placement="left-start">
                              <el-button type="danger" :icon="Delete" circle @click="event.delete(scope.row.id)" />
                            </el-tooltip>
                           
                            
                         
                        </template>
                    </el-table-column>
                </el-table>
                <div class="table-foot" style="margin-left: 500px; margin-top: 20px;">
                    <el-pagination background size="small" layout="prev, pager, next" v-model:current-page="data.pages!.page" v-model:page-size="data.pages!.limit" :total="data.pages?.total" />
                </div>
            </el-skeleton>
        </div>

        
    </div>
</template>

<script setup lang="ts">
import {reactive,watchEffect} from 'vue';
import type {Reservation_Index_Data} from '../../utils/types';
import {Get_Reservation,Update_Reservation_State,Delete_Reservation} from '../../api/reservation/index'
import { Edit, Delete,Star,Check } from '@element-plus/icons-vue'
import { Timer } from '@element-plus/icons-vue'
import router from '@/router';
import { update_dept } from '../../api/org/dept';
import { msg } from '@/utils/msg'
const data=reactive<Reservation_Index_Data>({
    isFirst:true,
    data:[],
    loading:false,
    key:'',
    pages:{
        page:1,
        limit:10,
        total:0
    },
   
})
const event={
   Add(){
 router.push('/reservation/addreservation');
   },
   
  async statesy(id){
            data.loading=true;
        const res=await Update_Reservation_State({
                rid:id,
                state:2
        })
        if(res.code===0){
             method.bind();
            msg(res);
           
        }
        setTimeout(() => {
             data.loading=false;
        }, 1000);
       
   },
  async stateqx(id){
            data.loading=true;
            const res=await Update_Reservation_State({
                rid:id,
                state:3
            })
             if(res.code===0){
             method.bind();
            msg(res);
           
        }
        setTimeout(() => {
             data.loading=false;
        }, 1000);
   },
   async delete(id){
    data.loading=true;
    const res=await Delete_Reservation({
        rid:id
    });
      if(res.code===0){
             method.bind();
            msg(res);
           
        }
        setTimeout(() => {
             data.loading=false;
        }, 1000);
   }
}

const method={

    
    async bind(){
        data.loading=true;
        const res=await Get_Reservation({
            page:data.pages.page,
            limit:data.pages.limit,
            key:data.key
        });
        data.data=res.data.data;
        data.pages.total=res.data.total;
        data.isFirst=false;
        data.loading=false;
        console.log(data.data,"?????????????????!!!!!!!!!")
    }
}
watchEffect(()=>{
    method.bind();
   
})
</script>

<style scoped>
.main {
    width: 100%;
    height: 100%;
}

.duty_head {
    margin: 10px;
    height: 60px;
    border: 1px solid #eee;
    border-radius: 4px;
    display: flex;
}

.duty_add {
    padding-left: 20px;
    padding-top: 12px;
    flex: 1;
}

.search {
    flex: 2;
    line-height: 50px;
}

.duty_main {
    margin: 8px;
}
</style>